<template>
  <div>
    <a-card :title="`评价课程：${course.courseName}`" :bordered="false">
      <a-alert
        message="评价说明"
        description="请根据实际情况对任课教师的教学质量进行客观评价，您的评价将对教师改进教学提供重要参考。评价结果将严格保密。"
        type="info"
        show-icon
        style="margin-bottom: 24px;"
      />
      
      <a-form :form="form" layout="vertical">
        <a-card
          v-for="(section, sectionIndex) in evaluationSections"
          :key="sectionIndex"
          :title="section.title"
          style="margin-bottom: 24px;"
        >
          <a-form-item
            v-for="(question, qIndex) in section.questions"
            :key="`${sectionIndex}-${qIndex}`"
            :label="`${qIndex + 1}. ${question.content}`"
            :required="question.required"
          >
            <template v-if="question.type === 'score'">
              <a-rate
                v-decorator="[
                  `q_${sectionIndex}_${qIndex}`,
                  {
                    rules: [{ required: question.required, message: '请完成评分' }],
                    initialValue: 3
                  }
                ]"
                :count="5"
                :tooltips="question.options.map(opt => opt.text)"
                character="★"
                style="font-size: 24px;"
              />
              <div style="margin-top: 8px; color: rgba(0, 0, 0, 0.45);">
                <span style="margin-right: 16px;">1分: {{question.options[0].text}}</span>
                <span>5分: {{question.options[4].text}}</span>
              </div>
            </template>
            
            <template v-else-if="question.type === 'single'">
              <a-radio-group
                v-decorator="[
                  `q_${sectionIndex}_${qIndex}`,
                  { rules: [{ required: question.required, message: '请选择一项' }] }
                ]"
              >
                <a-radio
                  v-for="(option, oIndex) in question.options"
                  :key="oIndex"
                  :value="option.text"
                >
                  {{option.text}}
                </a-radio>
              </a-radio-group>
            </template>
            
            <template v-else-if="question.type === 'multiple'">
              <a-checkbox-group
                v-decorator="[
                  `q_${sectionIndex}_${qIndex}`,
                  { rules: [{ required: question.required, message: '请至少选择一项' }] }
                ]"
              >
                <a-row>
                  <a-col
                    v-for="(option, oIndex) in question.options"
                    :key="oIndex"
                    :span="12"
                    style="margin-bottom: 8px;"
                  >
                    <a-checkbox :value="option.text">
                      {{option.text}}
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </template>
            
            <template v-else-if="question.type === 'text'">
              <a-textarea
                v-decorator="[
                  `q_${sectionIndex}_${qIndex}`,
                  { 
                    rules: [
                      { 
                        required: question.required, 
                        message: '请输入评价内容',
                        whitespace: true
                      },
                      { max: 500, message: '最多输入500个字符' }
                    ] 
                  }
                ]"
                :rows="4"
                placeholder="请输入您的评价意见或建议"
              />
            </template>
          </a-form-item>
        </a-card>
        
        <a-card title="总体评价" style="margin-bottom: 24px;">
          <a-form-item label="您对本课程教师的总体评分">
            <a-rate
              v-decorator="['overall_score', { rules: [{ required: true, message: '请给出总体评分' }] }]"
              :count="10"
              allow-half
              style="font-size: 24px;"
            />
            <span style="margin-left: 16px; color: rgba(0, 0, 0, 0.45);">
              {{overallScoreText}}
            </span>
          </a-form-item>
          
          <a-form-item label="其他意见或建议">
            <a-textarea
              v-decorator="['suggestion']"
              :rows="4"
              placeholder="请输入您对本课程的其他意见或建议（选填）"
            />
          </a-form-item>
        </a-card>
        
        <div style="text-align: center; margin-top: 32px;">
          <a-button
            type="primary"
            size="large"
            style="margin-right: 24px; width: 120px;"
            @click="handleSubmit"
            :loading="submitting"
          >
            提交评价
          </a-button>
          <a-button
            size="large"
            style="width: 120px;"
            @click="handleCancel"
          >
            取消
          </a-button>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script>
export default {
  props: {
    course: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      submitting: false,
      evaluationSections: this.getEvaluationQuestions(),
      overallScore: 0
    }
  },
  computed: {
    overallScoreText() {
      if (this.overallScore === 0) return '请评分'
      if (this.overallScore <= 4) return '非常不满意'
      if (this.overallScore <= 6) return '不满意'
      if (this.overallScore <= 8) return '满意'
      return '非常满意'
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'evaluate_form' })
  },
  methods: {
    getEvaluationQuestions() {
      return [
        {
          title: '教学态度',
          questions: [
            {
              type: 'score',
              content: '教师的教学态度认真负责',
              required: true,
              options: [
                { text: '非常不满意', score: 1 },
                { text: '不满意', score: 2 },
                { text: '一般', score: 3 },
                { text: '满意', score: 4 },
                { text: '非常满意', score: 5 }
              ]
            },
            {
              type: 'score',
              content: '教师对学生的关心和指导',
              required: true,
              options: [
                { text: '非常不满意', score: 1 },
                { text: '不满意', score: 2 },
                { text: '一般', score: 3 },
                { text: '满意', score: 4 },
                { text: '非常满意', score: 5 }
              ]
            }
          ]
        },
        {
          title: '教学内容',
          questions: [
            {
              type: 'score',
              content: '教学内容充实，重点突出',
              required: true,
              options: [
                { text: '非常不满意', score: 1 },
                { text: '不满意', score: 2 },
                { text: '一般', score: 3 },
                { text: '满意', score: 4 },
                { text: '非常满意', score: 5 }
              ]
            },
            {
              type: 'single',
              content: '课程内容是否符合教学大纲要求',
              required: true,
              options: [
                { text: '完全符合' },
                { text: '基本符合' },
                { text: '一般' },
                { text: '不太符合' },
                { text: '不符合' }
              ]
            }
          ]
        },
        {
          title: '教学方法',
          questions: [
            {
              type: 'score',
              content: '教学方法灵活多样，能激发学习兴趣',
              required: true,
              options: [
                { text: '非常不满意', score: 1 },
                { text: '不满意', score: 2 },
                { text: '一般', score: 3 },
                { text: '满意', score: 4 },
                { text: '非常满意', score: 5 }
              ]
            },
            {
              type: 'multiple',
              content: '教师采用了哪些教学方法（可多选）',
              required: false,
              options: [
                { text: '讲授法' },
                { text: '讨论法' },
                { text: '案例教学' },
                { text: '实践教学' },
                { text: '多媒体教学' },
                { text: '其他' }
              ]
            }
          ]
        },
        {
          title: '教学效果',
          questions: [
            {
              type: 'score',
              content: '通过本课程学习，您的收获程度',
              required: true,
              options: [
                { text: '非常不满意', score: 1 },
                { text: '不满意', score: 2 },
                { text: '一般', score: 3 },
                { text: '满意', score: 4 },
                { text: '非常满意', score: 5 }
              ]
            },
            {
              type: 'text',
              content: '您对本课程教学效果的其他意见或建议',
              required: false
            }
          ]
        }
      ]
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submitting = true
          
          // 模拟提交过程
          setTimeout(() => {
            console.log('提交的评价数据:', values)
            this.submitting = false
            this.$message.success('评价提交成功')
            this.$emit('submit', {
              ...values,
              courseId: this.course.id,
              teacherName: this.course.teacherName,
              totalScore: this.calculateTotalScore(values)
            })
          }, 1500)
        }
      })
    },
    calculateTotalScore(values) {
      // 计算总分（实际应用中可能有更复杂的计算逻辑）
      let scoreSum = 0
      let scoreCount = 0
      
      // 计算各评分题的平均分
      this.evaluationSections.forEach((section, sIndex) => {
        section.questions.forEach((question, qIndex) => {
          if (question.type === 'score') {
            const key = `q_${sIndex}_${qIndex}`
            if (values[key] !== undefined) {
              scoreSum += values[key]
              scoreCount++
            }
          }
        })
      })
      
      // 加上总体评分（占较大权重）
      if (values.overall_score) {
        scoreSum += values.overall_score * 2
        scoreCount += 2
      }
      
      // 计算平均分并转换为百分制
      const averageScore = scoreCount > 0 ? scoreSum / scoreCount : 0
      return Math.round(averageScore * 20) // 5分制转百分制
    },
    handleCancel() {
      this.$confirm({
        title: '确认取消',
        content: '您确定要取消评价吗？已填写的内容将不会保存。',
        okText: '确定',
        cancelText: '继续填写',
        onOk: () => {
          this.$emit('cancel')
        }
      })
    }
  }
}
</script>

<style scoped>
.ant-rate {
  color: #faad14;
}
</style>